<template>
    <header class="hidden-xs-only">
        <!-- 菜单栏 -->
        <div class="menu-body">
            <div class="menu-contaienr">
                <div class="index-logo">
                    coinbase
                </div>
                <div class="menus" @mouseleave="hideSubMenu">
                    <div class="meun-item" @mouseover="activateSubMenu('explore')">Explore</div>
                    <div class="meun-item" @mouseover="activateSubMenu('learn')">Learn</div>
                    <div class="meun-item" @mouseover="activateSubMenu('individuals')">Individuals</div>
                    <div class="meun-item" @mouseover="activateSubMenu('business')">Business</div>
                    <div class="meun-item" @mouseover="activateSubMenu('developers')">Developers</div>
                    <div class="meun-item" @mouseover="activateSubMenu('company')">Company</div>
                </div>
                <div class="langSwitch">
                    <el-icon size="24" @click="setLang">
                        <PictureRounded />
                    </el-icon>
                </div>
            </div>
        </div>
        <!-- 二级菜单 -->
        <div class="sub-menu" v-if="isActive" @mouseleave="hideSubMenu" @mouseenter="cancelHideSubMenu">
            <div class="subMenu-container">
                <div class="subMenu-item" v-for="item in activeSubMenu" :key="item.id">
                    <el-icon size="12">
                        <ArrowRightBold />
                    </el-icon><span style="margin-left: 20px">subMenu-item</span>
                </div>

            </div>
        </div>
    </header>


    <!-- 手机版的导航栏 -->
    <header class="hidden-sm-and-up">
        <!-- 菜单栏 -->
        <div class="menu-body2">
            <div class="menu-contaienr">
                <div class="index-logo">
                    coinbase
                </div>
                <div class="langSwitch">
                    <el-icon @click="drawer = true">
                        <Menu />
                    </el-icon>
                </div>
            </div>
        </div>
        <!-- 二级菜单 -->
        
            <el-drawer v-model="drawer" :modal="false" title="I am the title" size="100%" :direction="direction" style="top:60px">
                <span>Hi, there!</span>
            </el-drawer>
    </header>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { t,locale } =useI18n()

function setLang() {
    
    locale.value = locale.value === "en" ? "cn" : "en"  // 设置语言模式
}



const drawer = ref(false)
const direction = ref('ttb')
// 定义不同菜单项对应的二级菜单数据
const subMenus = {
    explore: [
        { id: 1, name: 'Submenu 1' },
        { id: 2, name: 'Submenu 2' },
        { id: 3, name: 'Submenu 3' }
    ],
    learn: [
        { id: 4, name: 'Submenu 4' },
        { id: 5, name: 'Submenu 5' }
    ],
    individuals: [
        { id: 6, name: 'Submenu 6' },
        { id: 7, name: 'Submenu 7' }
    ],
    business: [
        { id: 8, name: 'Submenu 8' },
        { id: 9, name: 'Submenu 9' }
    ],
    developers: [
        { id: 10, name: 'Submenu 10' }
    ],
    company: [
        { id: 11, name: 'Submenu 11' },
        { id: 12, name: 'Submenu 12' },
        { id: 13, name: 'Submenu 13' }
    ]
}

// 当前激活的菜单项
const activeMenu = ref(null)
const activeIndex = ref('1')
let isActive = ref(false)
// 当前激活菜单项对应的二级菜单数据
const activeSubMenu = ref(null)
// 鼠标移入菜单项时触发
const activateSubMenu = (menu: string) => {
    isActive.value = true
    activeMenu.value = menu
    activeSubMenu.value = subMenus[menu]
}
// 隐藏二级菜单
const hideSubMenu = () => {
    isActive.value = false
}
// 取消隐藏二级菜单
const cancelHideSubMenu = () => {
    isActive.value = true
}
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.menu-body2 {
    border-bottom: 1px solid #edeff1;
    width: 100%;

    .menu-contaienr {
        display: flex;
        margin: 0 auto;
        height: 60px;
        align-items: center;
        justify-content: space-between;
        width: 80%;

        .index-logo {
            font-size: 26px;
            font-weight: 700;
            color: #0052ff;
        }

        .menus {
            height: 60px;
            display: flex;
            width: 700px;
            justify-content: space-around;

            .meun-item {
                cursor: pointer;
                line-height: 60px;
                font-weight: 500;

                &:hover {
                    color: #0052ff;

                    border-bottom: 3px solid #0052ff;
                }
            }
        }
    }
}

.menu-body {
    border-bottom: 1px solid #edeff1;
    width: 100%;

    .menu-contaienr {
        display: flex;
        margin: 0 auto;
        height: 60px;
        align-items: center;
        justify-content: space-between;
        width: 1200px;

        .index-logo {
            font-size: 26px;
            font-weight: 700;
            color: #0052ff;
        }

        .menus {
            height: 60px;
            display: flex;
            width: 700px;
            justify-content: space-around;

            .meun-item {
                cursor: pointer;
                line-height: 60px;
                font-weight: 500;

                &:hover {
                    color: #0052ff;

                    border-bottom: 3px solid #0052ff;
                }
            }
        }
    }
}

.sub-menu {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    box-shadow: 3px 3px 5px #f3f3f3;

    .subMenu-container {
        width: 600px;
        margin: 0 auto;
        padding: 30px 0;

        .subMenu-item {
            font-weight: 500;
            line-height: 50px;
            display: flex;
            align-items: center;
        }
    }
}
</style>